.checkbox {
  appearance: none;
  height: 15px;
  width: 15px;
  background-color: var(--vscode-checkbox-background);
  color: var(--vscode-checkbox-foreground);
  border: 1px solid var(--vscode-checkbox-border);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;

  &:focus {
    outline: none;
  }

  &:disabled {
    opacity: var(--disabled-opacity);
    cursor: default;
  }

  &:checked::before {
    font-family: 'codicon';
    content: '\eab2';
    font-size: 13px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
